<template>
	<div>
		<el-header>
			<div> <el-link type="success"
					href="https://www.bilibili.com/video/BV1wh4y1S7dr?p=10&spm_id_from=pageDriver&vd_source=7d7ceff098fef793753dc3966702edc2">
					<el-icon>
						<NoSmoking />
					</el-icon>
					欢迎使用智慧实验室管理系统</el-link> &nbsp;
				<span style="color: #0d47a1;">若在使用过程中发现bug,请联系开发人员YKX排查,谢谢
					<el-icon>
						<Clock />
					</el-icon>北京时间：{{ now }} &nbsp;
				</span>

			</div>
			<div>
				<span style="line-height: 40px;">
					<el-icon>
						<User />
					</el-icon>
					欢迎{{ user.username }}回来 &nbsp; </span>
				<el-dropdown>
					<el-avatar :size="40" :src="circleUrl" @click="showImage" />
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item>{{ user.role.roleName }}</el-dropdown-item>
							<el-dropdown-item @click="handleUpdateInfo">修改个人信息</el-dropdown-item>
							<el-dropdown-item @click="handleUpdatePwd">修改密码</el-dropdown-item>
							<el-dropdown-item v-if="user.username === 'admin'"
								@click="handleUpdate">更新学校平面图</el-dropdown-item>
							<el-dropdown-item @click="handleUpdateImage">修改头像</el-dropdown-item>
							<el-dropdown-item @click="handleExit">退出</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</el-header>

		<el-dialog v-model="dialogShowVisible" :fullscreen="true">
			<el-image :src="circleUrl" />
		</el-dialog>

		<el-dialog v-model="dialogVisible" title="更新学校平面图">
			<el-upload :accept="'image/*'" class="upload-demo" drag action="/adminapi/upload" :data="data"
				:on-success="handleSuccess">
				<el-icon class="el-icon--upload"><upload-filled /></el-icon>
				<div class="el-upload__text">
					将文件拖到此处或<em>点击上传</em>
				</div>
			</el-upload>
		</el-dialog>

		<el-dialog v-model="dialogUpdateInfoVisible" title="修改个人信息">
			<el-form ref="updateInfoFormRef" :model="updateInfoForm" :rules="rules" class="demo-ruleForm" status-icon>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="updateInfoForm.email" />
				</el-form-item>
				<el-form-item label="手机号" prop="tel">
					<el-input v-model="updateInfoForm.tel" />
				</el-form-item>

				<div class="dialog-footer">
					<el-button @click="dialogUpdateInfoVisible = false">取消</el-button>
					<el-button type="primary" @click="handleUpdateInfoConfirm()">
						确定
					</el-button>
				</div>
			</el-form>
		</el-dialog>

		<el-dialog v-model="dialogPwdVisible" title="修改密码">
			<el-text class="mx-1" type="info">tips:密码修改完毕后需要用新密码重新登录</el-text>
			<el-form ref="updatePwdFormRef" :model="updatePwdForm" :rules="rules" class="demo-ruleForm" status-icon>
				<el-form-item label="原密码" prop="password">
					<el-input v-model="updatePwdForm.password" type="password" />
				</el-form-item>
				<el-form-item label="新密码" prop="newPassword">
					<el-input v-model="updatePwdForm.newPassword" type="password" />
				</el-form-item>
				<el-form-item label="确认新密码" prop="confirmNewPassword">
					<el-input v-model="updatePwdForm.confirmNewPassword" type="password" />
				</el-form-item>
				<div class="dialog-footer">
					<el-button @click="dialogPwdVisible = false">取消</el-button>
					<el-button type="primary" @click="handleUpdatePwdConfirm()">
						确定
					</el-button>
				</div>
			</el-form>
		</el-dialog>

		<el-dialog v-model="dialogImageVisible" title="上传头像">
			<el-upload class="avatar-uploader" action="/adminapi/upload/image" :limit="1" :accept="'image/*'"
				:on-success="handleAvatarSuccess" :data="data">
				<img v-if="imageUrl" :src="imageUrl" class="avatar" />
				<el-icon v-else class="avatar-uploader-icon">
					<Plus />
				</el-icon>
			</el-upload>
		</el-dialog>

	</div>
</template>

<script setup>
import {
	Clock,
	User,
	NoSmoking
} from '@element-plus/icons-vue'
import { useUserStore } from '../../store/useUserStore';
import { useRouterStore } from '../../store/useRouterStore';
import { useRouter } from 'vue-router';
import { ref, reactive, watch } from 'vue';
import { UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { imageBaseUrl } from '../../util/urlconfig';
import axios from 'axios';
const { changeUser, user } = useUserStore();
const { changeRouter } = useRouterStore();
const router = useRouter();
const handleExit = () => {
	changeUser({});
	changeRouter(false);
	localStorage.removeItem("token")
	router.push("/login")
}

let circleUrl = user.imageUrl == null ? "/avatar.png" : imageBaseUrl + user.imageUrl;

const imageUrl = ref()
const now = new Date().toLocaleString();
const dialogVisible = ref(false);
const dialogPwdVisible = ref(false);
const dialogUpdateInfoVisible = ref(false)
const dialogImageVisible = ref(false)
const dialogShowVisible = ref(false)

const updateInfoFormRef = ref();
const updateInfoForm = reactive({
	email: user.email,
	tel: user.tel,
	id: user.id
})

const updatePwdFormRef = ref();
const updatePwdForm = reactive({
	password: "",
	newPassword: "",
	confirmNewPassword: "",
	id: user.id
})
const rules = reactive({
	password: [
		{ required: true, message: '请输入原密码', trigger: 'blur' }
	],
	newPassword: [
		{ required: true, message: '请输入新密码', trigger: 'blur' }
	],
	confirmNewPassword: [
		{ required: true, message: '请确认新密码', trigger: 'blur' }
	]
})

const handleAvatarSuccess = (response, file, fileList) => {
	ElMessage.success("头像修改成功")
	fileList.splice(fileList.indexOf(file), 1);
	imageUrl.value = imageBaseUrl + response.data
	dialogImageVisible.value = false;
	circleUrl = imageBaseUrl + response.data
}

const handleUpdateInfo = () => {
	dialogUpdateInfoVisible.value = true;
}

const handleUpdatePwd = () => {
	dialogPwdVisible.value = true
}

const handleUpdateInfoConfirm = async () => {
	dialogUpdateInfoVisible.value = false;
	var res = await axios.put(`/adminapi/users/updateInfo/${user.id}`, updateInfoForm)
	if (res.data.code === 0) {
		ElMessage.success("修改成功")
	} else {
		ElMessage.error(res.data.msg)
	}
}

const handleUpdatePwdConfirm = async () => {
	updatePwdFormRef.value.validate(async (valid) => {
		if (valid) {
			if (updatePwdForm.newPassword !== updatePwdForm.confirmNewPassword) {
				ElMessage.error("两次输入的密码不一致")
			} else {
				var res = await axios.put(`/adminapi/users/updatePwd/${updatePwdForm.id}`, updatePwdForm)
				if (res.data.code === 0) {
					dialogPwdVisible.value = false;

					// 退出登录
					handleExit()

				} else {
					ElMessage.error(res.data.msg)
				}
			}
		} else {
			console.log("submit error")
		}
	})
}



const displayUser = () => {
	console.log(user)
}

const handleUpdate = () => {
	dialogVisible.value = true
}

const data = {
	"token": localStorage.getItem("token"),
	"id": user.id
}

const handleUpdateImage = () => {
	dialogImageVisible.value = true
}

const handleSuccess = () => {
	dialogVisible.value = false;
	window.location.reload()
}

const showImage = () => {
	dialogShowVisible.value = true;
}

</script>

<style lang="scss" scoped>
.el-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #0d47a1;
	color: white;
}

.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}


.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>